<template>
  <view :data-theme="theme">
    <view class="cart_nav" style='height:20rpx;'>
      <!-- #ifndef APP-PLUS -->
      <nav-bar 
        iconColor='#fff' 
        ref="navBarRef" 
        :isBackgroundColor="false" 
        navTitle="车辆管理"
        :leftBtn="{
          icon: 'icon-fanhui', 
          text: '返回', 
          onClick: () => this.goBack()
        }"
        :rightBtn="{
          icon: 'icon-shouye', 
          text: '首页', 
          onClick: () => this.goHome()
        }"
      >
      </nav-bar>
      <!-- #endif -->
    </view>

    <!-- 数据展示区域 -->
    <view 
      v-for="(item, index) in carList" 
      :key="index" 
      class="car-item"
      :class="{ active: selectedCarIndex === index }"
      @click="handleCarClick(item, index)"
    >
      <image class="icon" src="../../../static/tabBar/car.png"></image>
      <text class="plate-number">{{ item.carNum }}</text>
      <button @click.stop="unbondCar(index)" class="unbond-button">解 绑</button>
    </view>

    <!-- 提示信息 -->
    <view class="hint-text">最多添加五辆</view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button @click="queryFee" class="common-button-query">查询交费</button>
      <button @click="addCar" class="common-button">添加车辆</button>
    </view>

    <!-- 弹窗：添加车牌号 -->
    <uni-popup ref="popup" :mask-click="false">
      <view class="popup-content rounded-box">
        <text>请输入车牌号</text>
        
        <!-- 车牌输入框 -->
        <view class="inputs custom-input-class">
          <view :class="'inputs-item custom-item-class ' + (currentInput === 0 ? 'item-active' : '')" @tap="showProvinceBoard">{{ plateNumber[0] }}</view>
          <view :class="'inputs-item custom-item-class ' + (currentInput === 1 ? 'item-active' : '')" @tap="showAreaBoard">{{ plateNumber[1] }}</view>
          <view class="split">·</view>
          <view :class="'inputs-item custom-item-class ' + (currentInput === 2 ? 'item-active' : '')" @tap="showNumberBoard" :data-index="2">{{ plateNumber[2] }}</view>
          <view :class="'inputs-item custom-item-class ' + (currentInput === 3 ? 'item-active' : '')" @tap="showNumberBoard" :data-index="3">{{ plateNumber[3] }}</view>
          <view :class="'inputs-item custom-item-class ' + (currentInput === 4 ? 'item-active' : '')" @tap="showNumberBoard" :data-index="4">{{ plateNumber[4] }}</view>
          <view :class="'inputs-item custom-item-class ' + (currentInput === 5 ? 'item-active' : '')" @tap="showNumberBoard" :data-index="5">{{ plateNumber[5] }}</view>
          <view :class="'inputs-item custom-item-class ' + (currentInput === 6 ? 'item-active' : '')" @tap="showNumberBoard" :data-index="6">{{ plateNumber[6] }}</view>
          <view :class="'inputs-item custom-item-class ' + (currentInput === 7 ? 'item-active' : '')" @tap="showNumberBoard" :data-index="7">
            <text class="new" v-if="!plateNumber[7]">+</text>
            <text v-else>{{ plateNumber[7] }}</text>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="popup-buttons">
          <button class="popup-button cancel" @click="cancelAddCar">取消</button>
          <button class="popup-button confirm" @click="confirmAddCar" :disabled="btnDisabled">确定</button>
        </view>
      </view>
    </uni-popup>

    <!-- 虚拟键盘 -->
    <view class="keyboard" v-if="keyboardVisible">
      <view class="keyboardClose">
        <view class="keyboardClose_btn" @tap="closeKeyboard">关闭</view>
      </view>
      
      <!-- 省份简写键盘 -->
      <view class="keyboard-item" v-if="keyboardType === 1">
        <view class="keyboard-line" v-for="(item, index) in provinces" :key="index">
          <view class="keyboard-btn" :data-val="itemlist" @tap="chooseProvince" v-for="(itemlist, index1) in item" :key="index1">
            {{ itemlist }}
          </view>
        </view>
        <view class="keyboard-del" @tap="delProvince">
          <text>清除</text>
        </view>
      </view>
      
      <!-- 地区简写键盘 -->
      <view class="keyboard-item" v-if="keyboardType === 2">
        <view class="keyboard-line" v-for="(item, index) in areas" :key="index">
          <view class="keyboard-btn" :data-val="itemlist" @tap="chooseArea" v-for="(itemlist, index1) in item" :key="index1">
            {{ itemlist }}
          </view>
        </view>
        <view class="keyboard-del" @tap="delArea">
          <text>清除</text>
        </view>
      </view>
      
      <!-- 普通类型键盘 -->
      <view class="keyboard-item" v-if="keyboardType === 3">
        <view class="keyboard-line" v-for="(item, index) in numbers" :key="index">
          <view class="keyboard-btn" :data-val="itemlist" @tap="chooseNumber" v-for="(itemlist, index1) in item" :key="index1">
            {{ itemlist }}
          </view>
        </view>
        <view class="keyboard-del" @tap="delNumber">
          <text>清除</text>
        </view>
      </view>
      
      <!-- 最后一位键盘 -->
      <view class="keyboard-item" v-if="keyboardType === 4">
        <view class="keyboard-line" v-for="(item, index) in last" :key="index">
          <view class="keyboard-btn" :data-val="itemlist" @tap="chooseLast" v-for="(itemlist, index1) in item" :key="index1">
            {{ itemlist }}
          </view>
        </view>
        <view class="keyboard-del" @tap="delLast">
          <text>清除</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {addMemberCar, getMemberCarByPhone, updateMemberCar, getCarOrderOfJS,listByMemberCar} from '@/api/parking.js';
export default {
  data() {
    return {
      theme: 'default',
      navH: 100,
      carList: [],
      // 新增车牌输入相关数据
      plateNumber: Array(8).fill(''),
      currentInput: 0,
      keyboardVisible: false,
      keyboardType: 1,
      isNewEnergy: false,
      selectedCarIndex: null,
      selectedCar: null,
      attributes: {}, // 存储订单属性
      // 省份输入
      provinces: [
        ['京', '沪', '粤', '津', '冀', '晋', '蒙', '辽', '吉', '黑'],
        ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
        ['桂', '琼', '渝', '川', '贵', '云', '藏'],
        ['陕', '甘', '青', '宁', '新']
      ],
       areas: [
        // 第一行: QWERTYUIOP
        ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
        // 第二行: ASDFGHJKL
        ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
        // 第三行: ZXCVBNM
        ['Z', 'X', 'C', 'V', 'B', 'N', 'M']
      ],
      // 车牌输入 - 按电脑键盘布局排列
      numbers: [
        // 数字键区: 1234567890
        ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
        // 第一行字母: QWERTYUIOP
        ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
        // 第二行字母: ASDFGHJKL
        ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
        // 第三行字母: ZXCVBNM
        ['Z', 'X', 'C', 'V', 'B', 'N', 'M']
      ],
      last: [
        // 数字键区: 1234567890
        ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
        // 第一行字母: QWERTYUIOP
        ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
        // 第二行字母: ASDFGHJKL
        ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
        // 第三行字母: ZXCVBNM
        ['Z', 'X', 'C', 'V', 'B', 'N', 'M'],
        // 特殊字符单独一行
        ['港', '澳', '学', '挂', '警']
      ],
      zIndex: {
        keyboard: 1000,
        popup: 999,
      }
    };
  },
  
  computed: {
    btnDisabled() {
      if (this.plateNumber[6] && !this.plateNumber[7]) {
        return false;
      } else if (this.plateNumber[6] && this.plateNumber[7]) {
        return false;
      } else {
        return true;
      }
    }
  },

  onLoad() {
    this.getMemberCarByPhone();
  },

  methods: {
    handleCarClick(item, index) {
      this.selectedCarIndex = index;
      this.selectedCar = item;
    },

    getMemberCarByPhone() {
      this.selectedCarIndex = null;
      const memberPhone = uni.getStorageSync('phone');
      console.log('memberPhone:', memberPhone);
      if (memberPhone) {
        let params = {
          memberPhone : memberPhone
        }
        listByMemberCar(params)
         .then(res => {
            this.carList = res.rows || []; 
            console.log('获取用户绑定车辆:', this.carList);
          })
         .catch(err => {
            console.error('获取用户绑定车辆失败:', err);
            // uni.showToast({
            //   title: '获取车辆列表失败',
            //   icon: 'none'
            // });
          });
      } else {
        console.error('未获取到用户手机号');
        uni.showToast({
          title: '未获取到用户手机号',
          icon: 'none'
        });
      }
    },
    
    goBack() {
      uni.navigateBack({
        delta: 1
      });
    },
    
    goHome() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },

    unbondCar(index) {
      const memberCar = this.carList[index];
      memberCar.carStatus = 3;

      updateMemberCar(memberCar).then(res => {
        console.log('解绑车辆成功:', res);
        uni.showToast({
          title: '解绑成功',
          icon: 'success'
        });
        this.carList.splice(index, 1);
      })
      .catch(err => {
        console.error('解绑车辆失败:', err);
        uni.showToast({
          title: '解绑车辆失败',
          icon: 'error'
        });
      })
    },
    
    addCar() {
      if (this.carList.length < 5) {
        this.plateNumber = Array(8).fill('');
        this.currentInput = 0;
        this.keyboardVisible = false;
        this.keyboardType = 1;
        this.isNewEnergy = false;
        this.$refs.popup.open('center');
      } else {
        uni.showToast({ title: '最多添加五辆' ,icon: 'error' });
      }
    },
    
    closeKeyboard() {
      this.keyboardVisible = false;
    },

    showProvinceBoard() {
      this.keyboardVisible = true;
      this.currentInput = 0;
      this.keyboardType = 1;
    },

    chooseProvince(event) {
      const { val } = event.currentTarget.dataset;
      this.$set(this.plateNumber, 0, val);
      this.currentInput = 1;
      this.keyboardType = 2;
    },

    delProvince() {
      this.$set(this.plateNumber, 0, '');
    },

    showAreaBoard() {
      this.keyboardVisible = true;
      this.currentInput = 1;
      this.keyboardType = 2;
    },

    chooseArea(event) {
      const { val } = event.currentTarget.dataset;
      this.$set(this.plateNumber, 1, val);
      this.currentInput = 2;
      this.keyboardType = 3;
    },

    delArea() {
      this.$set(this.plateNumber, 1, '');
      this.currentInput = 0;
      this.keyboardType = 1;
    },

    showNumberBoard(event) {
      const { index } = event.currentTarget.dataset;
      const keyboardType = index === 6 || index === 7 ? 4 : 3;
      this.keyboardVisible = true;
      this.currentInput = index;
      this.keyboardType = keyboardType;
    },

    chooseNumber(event) {
      const { val } = event.currentTarget.dataset;
      this.$set(this.plateNumber, this.currentInput, val);
      if (this.currentInput === 5) {
        this.keyboardType = 4;
      }
      if (this.currentInput < 7) {
        this.currentInput++;
      } else {
        this.keyboardVisible = false;
      }
    },

    delNumber() {
      this.$set(this.plateNumber, this.currentInput, '');
      if (this.currentInput === 1) {
        this.keyboardType = 2;
      } else if (this.currentInput > 1) {
        this.keyboardType = 3;
      }
      if (this.currentInput > 0) {
        this.currentInput--;
      }
    },

    chooseLast(event) {
      const { val } = event.currentTarget.dataset;
      this.$set(this.plateNumber, this.currentInput, val);
      if (this.currentInput < 7) {
        this.currentInput++;
      } else {
        this.keyboardVisible = false;
      }
    },

    delLast() {
      this.$set(this.plateNumber, this.currentInput, '');
      if (this.currentInput > 0) {
        this.currentInput--;
      }
      if (this.currentInput < 6) {
        this.keyboardType = 3;
      } else {
        this.keyboardType = 4;
      }
    },

    confirmAddCar() {
      if (this.plateNumber[6] === '') {
        uni.showToast({ title: '请完整输入车牌号', icon: 'none' });
        return;
      }

      const fullPlate = this.plateNumber[0] + '-' + this.plateNumber.slice(1).join('').replace(/\s/g, '');
      console.log('完整车牌号(带"-"):', fullPlate);

      this.submitToBackend(fullPlate);
    },

    submitToBackend(data) {
      const exists = this.carList.some(car => car.carNum === data);
      if (exists) {
        uni.showToast({ title: '该车辆已添加过', icon: 'none' });
        return;
      }
      

      let params = {
        carNum: data,
        memberPhone: uni.getStorageSync('phone'),
        openid: uni.getStorageSync('openid'),
        carStatus: 1
      }

      console.log('添加车辆请求参数：', params);
      
      addMemberCar(params)
        .then(res => {
          console.log('添加车辆返回结果:', res);
          
         if (res.code === 200) {
          // 操作成功，使用 showModal 显示完整信息
          uni.showModal({
            title: '提示',
            content: res.data,
            showCancel: false, // 不显示取消按钮
            success: () => {
              this.$refs.popup.close();
              this.getMemberCarByPhone();
            }
          });
        } else {
          // 操作失败，使用 showModal 显示错误信息
          uni.showModal({
            title: '错误',
            content: res.data || '添加失败，请重试',
            showCancel: false, // 不显示取消按钮
            success: () => {
              // 可选：在此处添加其他失败处理逻辑
            }
          });
        }
        })
        .catch(err => {
          console.error('添加车辆失败:', err);
          if (err.code == 4001) {
            uni.showModal({
              title: '提示',
              content: err.msg,
              showCancel: false,
              success: function (res) {
                if (res.confirm) {
                  console.log('用户点击确定');
                }
              }
            });
          }else {
           
            uni.showToast({
              title: '出错了，请重试或重新登录',
              icon: 'error'
            });
          }
        }); 
    },

    

    // submitToBackend(data){
    //   const exists = this.carList.some(car => car.carNum === data);
    //   if (exists) {
    //     uni.showToast({ title: '该车辆已添加过', icon: 'none' });
    //     return;
    //   }

    //   let params = {
    //     carNum: data,
    //     memberPhone: uni.getStorageSync('phone'),
    //     openid: uni.getStorageSync('openid'),
    //     carStatus: 1
    //   }

    //   console.log('添加车辆：', params);
       
    //   addMemberCar(params)
    //     .then(res => {
    //       console.log('添加成功:', res);
    //       uni.showToast({
    //         title: '添加成功',
    //         icon: 'success'
    //       });
    //       this.$refs.popup.close();
    //       this.getMemberCarByPhone();
    //     })
    //     .catch(err => {
    //       if (err.code == 4001) {
    //         uni.showModal({
    //           title: '提示',
    //           content: err.msg,
    //           showCancel: false,
    //           success: function (res) {
    //             if (res.confirm) {
    //               console.log('用户点击确定');
    //             }
    //           }
    //         });
    //       } else {
    //         uni.showToast({
    //           title: '出错了，请重试或联系管理员',
    //           icon: 'error'
    //         });
    //       }
    //     }); 
    // },
    
    cancelAddCar() {
      this.$refs.popup.close();
    },
    
    // 会员车辆检查
    memberExsist(param) {
      return new Promise((resolve, reject) => {
        getMemberCarByPhone({ licensePlate: param })
          .then(res => {
            console.log('会员车辆检查结果:', res);
            this.memberCar = res.total > 0;
            resolve(this.memberCar);
          })
          .catch(err => {
            console.error('查询会员车辆失败', err);
            reject(err);
          });
      });
    },

    // 获取订单信息
    getOrderInfo(carNum) {
      return new Promise((resolve, reject) => {
        getCarOrderOfJS({ carNo: carNum })
          .then(res => {
            if (res.code === 200 && res.data.length > 0) {
              this.attributes = res.data[0].attributes;
              resolve(this.attributes);
            } else {
              uni.showToast({ title: '未查询到订单信息', icon: 'none' });
              reject(new Error('未查询到订单信息'));
            }
          })
          .catch(err => {
            console.error('查询订单失败', err);
            uni.showToast({ title: '查询订单失败，请重试', icon: 'none' });
            reject(err);
          });
      });
    },
    
    // 验证车牌号格式
    validatePlateNumber(plateNumber) {
      if (!plateNumber[0]) {
        return false;
      }
      if (!plateNumber[1]) {
        return false;
      }
      for (let i = 2; i < 7; i++) {
        if (plateNumber[i]) {
          return true;
        }
      }
      return false;
    },
    
    // 查询交费按钮处理
    // queryFee() {
    //   this.memberCar = true;
    //   if (!this.selectedCar) {
    //     uni.showModal({ title: '请选择要查询的车辆' });
    //     return;
    //   }
      
    //   const carNum = this.selectedCar.carNum;
      
    //   uni.showLoading({ title: '查询中...' });
      
    //   // 先查询会员车辆信息
    //   this.memberExsist(carNum)
    //     .then(isMember => {
    //       console.log('打印memberExsist会员车辆：', isMember);
    //       // 再查询订单信息
    //       return this.getOrderInfo(carNum);
    //     })
    //     .then(attributes => {
    //       uni.hideLoading();
    //       console.log('订单信息：', attributes);

          
    //       if(attributes.retcode == "2"){
    //         uni.showModal({ title: '未查询到该车辆的入场信息' });

    //       }else{

    //        let isexist = true;
    //         // 跳转至收银台页面并传递参数
    //         uni.navigateTo({
    //           url: `/pages/parking/checkstand_pay/index?carNum=${encodeURIComponent(carNum)}&memberCar=${isexist}&attributes=${encodeURIComponent(JSON.stringify(attributes))}`
    //         });
    //       }
    //     })
    //     .catch(err => {
    //       uni.hideLoading();
    //       console.error('查询流程异常', err);
    //       uni.showToast({
    //         title: '没有找到入场记录，请确认车牌是否正确',
    //         icon: 'none',
    //         duration: 2000
    //       });
    //     });
    // }

    // 查询交费按钮处理
    queryFee() {
      this.memberCar = true;
      if (!this.selectedCar) {
        uni.showModal({ title: '请选择要查询的车辆' });
        return;
      }
      
      const carNum = this.selectedCar.carNum;
      
      uni.showLoading({ title: '查询中...' });
      
      // 使用Promise封装延迟逻辑
      new Promise(resolve => setTimeout(resolve, 2000)) // 延迟2秒
        .then(() => this.memberExsist(carNum))
        .then(isMember => {
          console.log('打印memberExsist会员车辆：', isMember);
          return this.getOrderInfo(carNum);
        })
        .then(attributes => {
          uni.hideLoading();
          console.log('订单信息：', attributes);

          if(attributes.retcode == "2"){
            uni.showModal({ title: '未查询到该车辆的入场信息' });
          } else {
            let isexist = true;
            uni.navigateTo({
              url: `/pages/parking/checkstand_pay/index?carNum=${encodeURIComponent(carNum)}&memberCar=${isexist}&attributes=${encodeURIComponent(JSON.stringify(attributes))}`
            });
          }
        })
        .catch(err => {
          uni.hideLoading();
          console.error('查询流程异常', err);
          uni.showToast({
            title: '没有找到入场记录，请确认车牌是否正确',
            icon: 'none',
            duration: 2000
          });
        });
    }

  }
}
</script>

<style scoped lang="scss">
.data-list {
  padding: 20rpx;
}

.car-item {
  display: flex;
  align-items: center;
  margin:0 auto;
  padding: 20rpx 40rpx 20rpx;
  margin-bottom: 20rpx;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8rpx;
  height: 80rpx;
  width: 95%;
}

.car-item.active {
  background-color: #FEF6EF;
  border-color: #FE725C;
  .plate-number {
    color: #FE725C;
  }
}

.plate-image {
  width: 60rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.plate-number {
  font-size: 30rpx;
  color: #333333;
  flex: 1;
  margin-left: 15rpx;
}

.unbond-button {
  font-size: 24rpx;
  color: #FA6401;
  border-color: #FA6401;
  background-color: transparent;
  border-width: 2rpx;
  border-style: solid;
  border-radius: 40rpx;
  padding: 0 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36rpx;
  line-height: 36rpx;
  width:114rpx;
}

.icon {
  width: 30rpx;
  height: 30rpx;
}

.hint-text {
  font-size: 24rpx;
  color: #999999;
  text-align: center;
  margin-top: 20rpx;
}

.action-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background-color: #f5f5f5;
  padding-bottom: var(--safe-area-inset-bottom);
  top: 60%;
}

.common-button {
  width: 40%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #FE725C;
  color: #ffffff;
  font-size: 28rpx;
  border-radius: 40rpx;
  margin: 0 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.common-button-query{
  width: 40%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #ffffff;
  color:  #FE725C;
  font-size: 28rpx;
  border-radius: 40rpx;
  margin: 0 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border:1px solid #FA6401;
}

.popup-content {
  background-color: #fff;
  padding: 40rpx;
  border-radius: 16rpx;
  width: 95%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}

.inputs {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 20rpx auto;
  justify-content: center;
}

.split {
  font-weight: bold;
  font-size: 48rpx;
  margin: 0 10rpx;
}

.inputs-item {
  border: 1rpx solid #8d8d8d;
  border-radius: 12rpx;
  margin: 5rpx;
  width: 68rpx;
  font-size: 48rpx;
  text-align: center;
  height: 86rpx;
  line-height: 86rpx;
}

.item-active {
  border: 2rpx solid #ff6666;
  color: #ff6666;
}

.popup-buttons {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 40rpx;
}

.popup-button {
  width: 45%;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  border-radius: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cancel {
  color: #333;
  background-color: #f5f5f5;
}

.confirm {
  color: #ffffff;
  background-color: #FE725C;
}

/* 虚拟键盘样式 */
.keyboard {
  position: fixed;
  bottom: 0;
  background-color: #d1d5d9;
  width: 100%;
  left: 0;
  padding: 10rpx 0;
  z-index: 1000;
  box-sizing: border-box;
}

.keyboardClose {
  height: 70rpx;
  background-color: #f7f7f7;
  overflow: hidden;
  padding: 0 20rpx;
}

.keyboardClose_btn {
  float: right;
  line-height: 70rpx;
  font-size: 15px;
}

.keyboard-line {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  padding: 5rpx 10rpx;
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 750rpx;
}

.keyboard-btn {
  font-size: 32rpx;
  color: #333333;
  background: #fff;
  text-align: center;
  box-shadow: 0 2rpx 0 0 #999999;
  border-radius: 10rpx;
  margin: 5rpx;
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 0 60rpx;
  max-width: 60rpx;
}

.keyboard-del {
  font-size: 32rpx;
  color: #333333;
  background: #a7b0bc;
  display: inline-block;
  padding: 0;
  box-shadow: 0 2rpx 0 0 #999999;
  border-radius: 10rpx;
  margin: 5rpx;
  width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  position: absolute;
  bottom: 15rpx;
  right: 15rpx;
}

.new {
  color: #999;
  text-align: center;
  font-size: 36rpx;
  width: 100%;
  vertical-align: top;
}
</style>